<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">


</head>

<body>
  <div id="app">
    <div id="header">
      <i class="iconfont icon-zhaoxiangji"></i>
      <input type="text" placeholder="面霜/洗面奶/口红">
      <i class="iconfont icon-chat"></i>
    </div>
    <div id="nav">
      <section class="banner">
        <img :src="nav_banner_img" alt="">
      </section>
      <div class="tip1">
        <div v-for="item in tip1">
          <img :src="item.src" alt="">{{item.txt}}
        </div>
      </div>
      <!-- 金刚区 -->
      <figure class="jingangqu">
        <section v-for="item in jingangqu"><img :src="item.src">{{item.title}}</section>
      </figure>
    </div>
    <div id="main">
      <div class="every">
        <my-every v-for="item in every" :item="item
        " :key="item.title"></my-every>

      </div>
      <div class="zaobao">
        早报 <button>热门</button> 360°无死角底妆秘籍
      </div>
      <div class="new_dalibao">
        <img src="./images/首页-05-大礼包.png" alt="">
      </div>
      <div class="huiyuan">
        <div v-for="item in huiyuan" :key="item.title">
          <div>
            <img :src="item.imgsrc" alt="">
          </div>
          <p class="title">{{item.title}}</p>
          <p class="current_price">&yen;{{item.current_price}}</p>
          <p class="price">&yen;{{item.price}}</p>
        </div>
      </div>

      <div class="main_main">
        <ul class="main_nav">
          <li v-for="item,index in main_main" :class="index===isClassify?'on':''" @click="handlerClick(index)">
            <p>{{item.classify}}</p>
            <button :class="index===isClassify?'on':''">{{item.txt}}</button>
          </li>
        </ul>
        <div class="content">
          <div v-for="ite,ind in main_main_goods" :class="ind===isClassify?'on':''">
            <section v-for="itm,inde in main_main_goods[isClassify]">
              <div><img :src="itm.src" alt=""></div>
              
              <p>{{itm.title}}</p>
              <p>&yen;{{itm.current_price}}</p>
            </section>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <footer id="bottom_nav">
      <section v-for="item,index in footerBtn" :class="index===footerBtnSelected?'on':''" @click="footerBtnSelected=index" >
        <i class="iconfont"  :class="item.icon"></i>{{item.title}}
      </section>
    </footer>
  </div>


  <script src="./js/flexible.js"></script>
  <script src="./lib/vue2.js"></script>
  <script>
    const myEvery = {
      props: {
        item: Object
      },
      template: `
      <div class="every_pre">
          <section class="content">
            <p>{{item.title}}</p>
            <p>{{item.tip}}</p>
            <button>{{item.btnCon}}</button>
          </section>
          <section class=imgContainer>
            <img :src='item.imgsrc' alt="">
          </section>
      </div>`
    }
    var app = new Vue({
      el: "#app",
      data() {
        return {
          // https://www.helloimg.com/images/2023/05/28/oJhqVD.gif
          nav_banner_img: "./images/banner.png	",

          jingangqu: [
            {
              title: "拍照亲测",
              src: "./images/首页-03-拍照亲测.png"
            },
            {
              title: "爆料广场",
              src: "./images/首页-03-爆料广场.png"
            },
            {
              title: "优惠福利",
              src: "./images/首页-03-优惠福利.png"
            },
            {
              title: "pk擂台",
              src: "./images/首页-03-PK擂台.png"
            },
            {
              title: "直播好货",
              src: "./images/首页-03-直播好货.png"
            },
          ],
          tip1: [
            {
              txt: "假一赔十",
              src: "./images/首页-02-假一赔十.png"
            },
            {
              txt: "全场包邮",
              src: "./images/首页-02-全场包邮.png"
            },
            {
              txt: "新人红包",
              src: "./images/首页-02-新人红包.png"
            },
            {
              txt: "门店自提",
              src: "./images/首页-02-门店自提.png"
            }
          ],
          every: [
            {
              title: "每日一签",
              tip: "做任务领积分",
              btnCon: "元旦狂欢礼",
              imgsrc: "./images/首页-04-每日一签.png"
            },
            {
              title: "整点抢购",
              tip: "新人0元抢",
              btnCon: "超值优惠",
              imgsrc: "./images/首页-04-整点抢购.png"
            },
            {
              title: "实时热销榜",
              tip: "近两小时",
              btnCon: "低至9.9",
              imgsrc: "./images/首页-04-实时热销榜.png"
            },
            {
              title: "好物Top榜",
              tip: "每小时更新",
              btnCon: "榜单Top榜",
              imgsrc: "./images/首页-04-实时热销榜.png"
            }
          ],
          huiyuan: [
            {
              imgsrc: "./images/首页-06-会员特惠01.png",
              title: "MAC/魅可尤雾弹哈哈哈哈哈哈",
              current_price: "160",
              price: "170",
            },
            {
              imgsrc: "./images/首页-06-会员特惠02.png",
              title: " 御泥坊白泥面膜哈哈哈哈哈哈",
              current_price: "120",
              price: "140",
            },
            {
              imgsrc: "./images/首页-06-会员特惠03.png",
              title: "肌肤之铜CPB粉哈哈哈哈哈哈",
              current_price: "980",
              price: "1040",
            },
            {
              imgsrc: "./images/首页-06-会员特惠04.png",
              title: "爱敬气垫BB霜旗哈哈哈哈哈哈",
              current_price: "158",
              price: "288",
            },

          ],
          isClassify: 0,
          main_main: [
            {
              flag: true,
              classify: "推荐",
              txt: "猜你喜欢",
            },
            {
              flag: false,
              classify: "自营",
              txt: "精品专区",
            },
            {
              flag: false,
              classify: "好店",
              txt: "品牌尖货",
            },
            {
              flag: false,
              classify: "关注",
              txt: "达人精选",
            }
          ],
          main_main_goods: [
            [
              {
                src: "./images/首页-07-推荐01.png",
                title: "GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/首页-07-推荐02.png",
                title: "ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
              {
                src: "./images/首页-07-推荐01.png",
                title: "GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/首页-07-推荐02.png",
                title: "ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
              {
                src: "./images/首页-07-推荐01.png",
                title: "GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/首页-07-推荐02.png",
                title: "ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
            ],
            [
              {
                src: "./images/占位图1.webp",
                title: "02GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/占位图1.webp",
                title: "02ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
              {
                src: "./images/占位图1.webp",
                title: "02GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/占位图1.webp",
                title: "02ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
              {
                src: "./images/占位图1.webp",
                title: "02GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/占位图1.webp",
                title: "02ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
            ],
            [
              {
                src: "./images/占位图2.png",
                title: "03GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/占位图2.png",
                title: "03ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
              {
                src: "./images/占位图2.png",
                title: "03GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/占位图2.png",
                title: "03ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
              {
                src: "./images/占位图2.png",
                title: "03GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/占位图1.png",
                title: "03ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
            ],
            [
              {
                src: "./images/首页-07-推荐01.png",
                title: "04GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/首页-07-推荐02.png",
                title: "04ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
              {
                src: "./images/首页-07-推荐01.png",
                title: "04GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/首页-07-推荐02.png",
                title: "04ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
              {
                src: "./images/首页-07-推荐01.png",
                title: "04GEOSKINCARE/纽西之谜火山岩泥浆100ML",
                current_price: "58"
              },
              {
                src: "./images/首页-07-推荐02.png",
                title: "04ESTEE LAUDER/雅诗兰黛DW持妆粉底液",
                current_price: "199"
              },
            ]
          ],
          footerBtnSelected: 0,
          footerBtn: [
            {
              title: "首页",
              icon: "icon-shouye"
            },
            {
              title: "选品",
              icon: "icon-icon-test47"
            },
            {
              title: "购物袋",
              icon: "icon-gouwuche"
            },
            {
              title: "我的",
              icon: "iconfont icon-me"
            }
          ]
        }
      },
      methods: {
        handlerClick(index) {
          this.isClassify = index
        }
      },
      computed: {

      },
      components: {
        myEvery
      }
    })
  </script>
</body>

</html>